<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Probably the most complete UI kit out there. Multiple functionalities and controls added,  extended color palette and beautiful typography, designed as its own extended version of Bootstrap at  the highest level of quality.                             ">
    <meta name="author" content="Webpixels">
    <title>Boomerang UI Kit - Free Bootstrap Framework by Webpixels</title>
    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">
    <!-- Theme CSS -->
    <link type="text/css" href="boomerang-free-bootstrap-ui-kit-master/assets/css/theme.css" rel="stylesheet">
    <!-- Demo CSS - No need to use these in your project -->
    <link type="text/css" href="boomerang-free-bootstrap-ui-kit-master/assets/css/demo.css" rel="stylesheet">
    <script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/jquery/jquery.min.js"></script>
    <!-- 校验 -->
    <script>
        $(document).ready(function() {
            // 账号校验
            function checkUsername() {
                var usernameRegular = /^[a-zA-Z0-9]{5,10}$/;
                var userName = $("#input_email").val().trim();
                var userNameMsg = $("#userNameMsg");
                userNameMsg.text("").hide();
                if (userName !== "") {
                    if (!usernameRegular.test(userName)) {
                        userNameMsg.text("账号格式是5-10位大小写字母或者数字").show();
                        return false;
                    } else {
                        userNameMsg.text("OK").show();
                        return true;
                    }
                }
                return false; // 当输入为空时，返回false表示验证失败
            }

            // 密码校验
            function checkUserPwd() {
                var userPwdRegular = /^[0-9]{6}$/;
                var userPwd = $("#input_password").val().trim();
                var userPwdMsg = $("#userPwdMsg");
                userPwdMsg.text("").hide();
                if (userPwd !== "") {
                    if (!userPwdRegular.test(userPwd)) {
                        userPwdMsg.text("密码格式是6位数字").show();
                        return false;
                    } else {
                        userPwdMsg.text("OK").show();
                        return true;
                    }
                }
                return false; // 当输入为空时，返回false表示验证失败
            }

            // 确认密码校验
            function checkUserPwdVerification() {
                var userPwd = $("#input_password").val().trim();
                var userPwdVerification = $("#input_password_verification").val().trim();
                var userPwdMsgVerification = $("#userPwdMsg_verification");
                userPwdMsgVerification.text("").hide();
                if (userPwdVerification !== "") {
                    if (userPwd !== userPwdVerification) {
                        userPwdMsgVerification.text("两次输入的密码不一致").show();
                        return false;
                    } else {
                        userPwdMsgVerification.text("OK").show();
                        return true;
                    }
                }
                return false; // 当输入为空时，返回false表示验证失败
            }

            // 表单提交校验
            $("#loginForm").submit(function(event) {
                event.preventDefault(); // 阻止表单默认提交行为
                var f1 = checkUsername();
                var f2 = checkUserPwd();
                var f3 = checkUserPwdVerification();
                if (f1 && f2 && f3) {
                    // 表单验证通过，可以进行提交
                    $.ajax({
                        url: "/bookstore/user/register",
                        type: "POST",
                        data: {
                            username: $("#input_email").val(),
                            password: $("#input_password").val()
                        },
                        success: function(response) {
                            console.log("Success callback executed");

                            if (response.success) {
                                console.log("Attempting to show alert with message:", response.message);
                                alert(response.message);
                                console.log("Alert shown, attempting to redirect");
                                // 避免浏览器缓存问题
                                window.location.href = "./sign-in.html?timestamp=" + new Date().getTime();
                            } else {
                                alert(response.message);
                            }
                        },
                        error: function(xhr, status, error) {
                            var errorMessage = xhr.status + ' ' + xhr.statusText + ': ' + xhr.responseText;
                            console.error("AJAX Error:", errorMessage);
                            alert("注册失败: " + errorMessage);
                        }
                    });
                } else {
                    // 验证失败，不提交表单
                    console.log("表单验证失败，无法提交");
                }
            });


            // 当用户离开输入框时也进行验证
            $("#input_email, #input_password, #input_password_verification").on("blur", function() {
                if ($(this).attr("id") === "input_email") {
                    checkUsername();
                } else if ($(this).attr("id") === "input_password") {
                    checkUserPwd();
                    checkUserPwdVerification(); // 验证确认密码
                } else {
                    checkUserPwdVerification();
                }
            });
        });
    </script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-transparent navbar-dark bg-dark py-4">
    <div class="container">
        <span class="navbar-brand">SWU BOOKSTORE</span>
        <a class="navbar-brand" href="./admin.html" style="font-size:20px;border: 1.5px solid transparent; border-image: linear-gradient(to right, lightgray, #288cff) 1; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);">后台管理入口</a>
        <button class="navbar-toggler" type="button" data-action="offcanvas-open" data-target="#navbar_main" aria-controls="navbar_main" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</nav>
<main class="main">
    <section class="py-xl bg-cover bg-size--cover" style="background-image: url('../assets/images/backgrounds/img-1.jpg')">
        <span class="mask bg-primary alpha-6"></span>
        <div class="container d-flex align-items-center no-padding">
            <div class="col">
                <div class="row justify-content-center">
                    <div class="col-lg-4">
                        <div class="card bg-primary text-white">
                            <div class="card-body">
                                <button type="button" class="btn btn-primary btn-nobg btn-zoom--hover mb-5">
                                    <span class="btn-inner--icon"><i class="fas fa-arrow-left"></i></span>
                                </button>
                                <span class="clearfix"></span>
                                <img src="boomerang-free-bootstrap-ui-kit-master/assets/images/brand/icon.png" style="width: 50px;">
                                <h4 class="heading h3 text-white pt-3 pb-5">欢迎访问西南大学网上书店<br>
                                </h4>
                                <form class="form-primary" id="loginForm" action="">
                                    <div class="form-group">
                                        <input type="text" class="form-control" id="input_email" name="username" placeholder="请输入账号">
                                        <span id="userNameMsg" style="color: red; display: none;"></span>
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" id="input_password" name="password" placeholder="请输入密码">
                                        <span id="userPwdMsg" style="color: red; display: none;"></span>
                                    </div>
                                    <div class="form-group">
                                        <input type="password" class="form-control" id="input_password_verification" placeholder="请确认输入密码">
                                        <span id="userPwdMsg_verification" style="color: red; display: none;"></span>
                                    </div>
                                    <button type="submit" class="btn btn-block btn-lg bg-white mt-4">注册</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>
<footer class="pt-5 pb-3 footer  footer-dark bg-tertiary">
    <div class="container">
        <div class="row">
            <div class="col-12 col-md-4">
                <div class="pr-lg-5">
                    <h1 class="heading h6 text-uppercase font-weight-700 mb-3"><strong>SWU</strong> BOOKSTORE</h1>
                    <p>本网站是由计算机与信息科学学院 软件学院本科生开发。本页面是西南大学网上书店面向顾客的前端部分，能展示后端各种图书的信息，并实现部分功能。若想查看后端部分，点击后台管理将重定向到后端部分的页面。</p>
                </div>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">购物指南</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="ShoppingProcess.html">购物流程</a></li>
                    <li><a class="text-muted" href="#">会员介绍</a></li>
                    <li><a class="text-muted" href="#">常见问题</a></li>
                    <li><a class="text-muted" href="#">联系客服</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">支付方式</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">货到付款</a></li>
                    <li><a class="text-muted" href="#">在线支付</a></li>
                    <li><a class="text-muted" href="#">分期付款</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">售后服务</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">售后政策</a></li>
                    <li><a class="text-muted" href="#">价格保护</a></li>
                    <li><a class="text-muted" href="#">退款说明</a></li>
                    <li><a class="text-muted" href="#">取消订单</a></li>
                </ul>
            </div>
            <div class="col-6 col-md">
                <h5 class="heading h6 text-uppercase font-weight-700 mb-3">关于</h5>
                <ul class="list-unstyled text-small">
                    <li><a class="text-muted" href="#">关于我们</a></li>
                    <li><a class="text-muted" href="#">联系我们</a></li>
                    <li><a class="text-muted" href="#">隐私政策</a></li>
                </ul>
            </div>
        </div>
        <hr>
        <div class="d-flex align-items-center">
          <span class="">
            &copy; 2018 <a href="https://webpixels.io/" class="footer-link" target="_blank">Webpixels</a>. All rights reserved.
          </span>
            <ul class="nav ml-lg-auto">
                <li class="nav-item">
                    <a class="nav-link active" href="https://instagram.com/webpixelsofficial" target="_blank"><i class="fab fa-instagram"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://facebook.com/webpixels" target="_blank"><i class="fab fa-facebook"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://github.com/webpixels" target="_blank"><i class="fab fa-github"></i></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="https://dribbble.com/webpixels" target="_blank"><i class="fab fa-dribbble"></i></a>
                </li>
            </ul>
        </div>
    </div>
</footer>
<!-- Core -->
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/jquery/jquery.min.js"></script>
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/popper/popper.min.js"></script>
<script src="boomerang-free-bootstrap-ui-kit-master/assets/js/bootstrap/bootstrap.min.js"></script>
<!-- FontAwesome 5 -->
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/fontawesome/js/fontawesome-all.min.js" defer></script>
<!-- Page plugins -->
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/bootstrap-select/js/bootstrap-select.min.js"></script>
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/bootstrap-tagsinput/bootstrap-tagsinput.min.js"></script>
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/input-mask/input-mask.min.js"></script>
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/nouislider/js/nouislider.min.js"></script>
<script src="boomerang-free-bootstrap-ui-kit-master/assets/vendor/textarea-autosize/textarea-autosize.min.js"></script>
<!-- Theme JS -->
<script src="boomerang-free-bootstrap-ui-kit-master/assets/js/theme.js"></script>


</body>
</html>
